<template>
    <el-menu 
      default-active="1-4-1" 
      class="el-menu-vertical-demo" 
      background-color="#333F51"
      text-color="#fff"
      active-text-color="#ffd04b"
      @open="handleOpen" 
      @close="handleClose" 
      :collapse="isCollapse">
      <h3>{{isCollapse ? '订单' : '订单管理系统'}} </h3>
      <el-menu-item @click="clickMenu(item)" v-for="item in noChild" :index="item.path + ''" :key="item.path">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
      <el-submenu v-for="item in hasChild" :index="item.path + ''" :key="item.path">
        <template slot="title">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{item.label}}</span>
       </template>
        <el-menu-item-group v-for="(subItem, subIndex) in item.child" :key="subItem.path">
          <el-menu-item @click="clickMenu(subItem)" :index="subIndex.toString()">{{subItem.label}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
</template>

<script>
  export default {
    name:'CommonAside',
    data() {
      return {
        menu:[
                /* {
                  path:'/',
                  name:'home',
                  label:'首页',
                  icon:'s-home',
                  url:'/'
                },
                {
                  path:'/User',
                  name:'User',
                  label:'用户管理',
                  icon:'user',
                  url:'/'
                },
                {
                  label:'订单管理',
                  icon:'location',
                  child:[
                    {
                      path:'/all-orders',
                      name:'all-orders',
                      label:'所有订单',
                      url:'/'
                    },
                    {
                      path:'/obligation',
                      name:'obligation',
                      label:'待付款',
                      url:'/'
                    },
                    {
                      path:'/wait-deliver',
                      name:'wait-deliver',
                      label:'待发货',
                      url:'/'
                    },
                    {
                      path:'/wait-receive',
                      name:'wait-receive',
                      label:'待团长收货',
                      url:'/'
                    },
                    {
                      path:'/wait-receive-user',
                      name:'wait-receive-user',
                      label:'待用户取货',
                      url:'/'
                    },
                    {
                      path:'/completed',
                      name:'completed',
                      label:'已完成',
                      url:'/'
                    },
                    {
                      path:'/refunded',
                      name:'refunded',
                      label:'已退款',
                      url:'/'
                    },
                    {
                      path:'/closed',
                      name:'closed',
                      label:'已关闭',
                      url:'/'
                    },
                    {
                      path:'/distribution-mode',
                      name:'distribution-mode',
                      label:'配送方式',
                      url:'/'
                    },
                  ]
                } */
        ]
                    
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      clickMenu(item){
        this.$router.push({
          name:item.name
        })
        this.$store.commit('selectMenu', item)
      }
    },
    computed:{
      noChild(){
        return this.asyncMenu.filter(item => !item.child)
      },

      hasChild(){
        return this.asyncMenu.filter(item => item.child)
      },

      isCollapse(){
        return this.$store.state.tab.isCollapse
      },

      asyncMenu(){
        return this.$store.state.tab.menu
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
 .el-menu {
   height: 100%;
   border: none;
   h3{
     color: #fff;
     text-align: center;
     line-height: 48px;
   }
 }
</style>